<template>
  <div id="linechart">
    <div id="line"></div>
    <div id="lineData">
      <el-input type="textarea" :rows="lineData.length" v-model="lineDataS" disabled></el-input>
       <el-button type="primary" plain @click="addData">Add</el-button>
       <el-button type="primary" plain @click="deleteData">Delete</el-button>
    </div>
  </div>
</template>
<script>
import {LineChart} from './LineChart'
export default {
  data () {
    return {
      lineData: [],
      lineChart: {},
      itemsName: []
    }
  },
  created () {
    this.setLineData()
  },
  mounted () {
    this.lineChart = LineChart
    this.lineChart.data = this.lineData
    this.lineChart.divId = 'line'
    this.lineChart.itemsName = this.itemsName
    this.lineChart.xLabel = '时间'
    this.lineChart.yLabel = '$'
    this.lineChart.title = 'lineChart'
    this.lineChart.draw()
  },
  computed: {
    lineDataS: {
      get: function () {
        let showData = ''
        for (let i = 0; i < this.lineData.length; ++i) {
          showData += this.lineData[i].toString() + '\n'
        }
        return showData
      }
    }
  },
  methods: {
    setLineData () {
      let lineNums = parseInt(Math.random() * 10 + 3)
      let itemNum = parseInt(Math.random() * 10 + 3)
      for (let i = 0; i < lineNums; ++i) {
        let line = []
        for (let j = 0; j < itemNum; ++j) {
          line.push(parseInt(Math.random() * 30))
        }
        this.lineData.push(line)
        this.itemsName.push('item-' + (i + 1))
      }
    },
    addData () {
      let len = 0
      if (this.lineData.length === 0) {
        len = parseInt(Math.random() * 10 + 3)
      } else {
        len = this.lineData[0].length
      }
      let itemLen = this.lineData.length
      let addNums = []

      for (let i = 0; i < len; ++i) {
        addNums.push(parseInt(Math.random() * 30))
      }

      this.lineData.splice(itemLen, 0, addNums)
      this.itemsName.push('item-' + this.lineData.length)
      this.lineChart.data = this.lineData
      this.lineChart.itemsName = this.itemsName
      this.lineChart.update()
    },
    deleteData () {
      let itemLen = this.lineData.length
      this.lineData.splice(Math.random() * itemLen, 1)
      this.itemsName.splice(Math.random() * itemLen, 1)
      this.lineChart.data = this.lineData
      this.lineChart.itemsName = this.itemsName
      this.lineChart.update()
    }
  }
}
</script>
<style scoped>
#linechart {
    height: 100%;
    width: 100%;
}
#line {
    height: 60%;
    width: 100%;
}
#lineData {
    height: 40%;
    width: 100%;
}
</style>
